import React from 'react';
import { Box, Text } from '@chakra-ui/react';

interface TimerProps {
  timeLeft: number;
}

const Timer: React.FC<TimerProps> = ({ timeLeft }) => {
  const formatTime = (seconds: number): string => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  const getColor = (): string => {
    if (timeLeft <= 60) return 'red.500'; // Red when less than 1 minute
    if (timeLeft <= 180) return 'orange.500'; // Orange when less than 3 minutes
    return 'green.500'; // Green otherwise
  };

  return (
    <Box bg={getColor()} color="white" borderRadius="full" px={4} py={2} fontWeight="bold">
      <Text>{formatTime(timeLeft)}</Text>
    </Box>
  );
};

export default Timer;
